
<template>
  <div class="rating-container">
    <div class="input-group">
      <label for="dormitoryNumber">宿舍号：</label>
      <input type="text" v-model="dormitoryNumber" id="dormitoryNumber" placeholder="请输入宿舍号" />
    </div>
    <div class="input-group">
      <label for="floorScore">地面评分：</label>
      <input type="number" v-model="floorScore" id="floorScore" placeholder="请输入地面评分" />
    </div>
    <div class="input-group">
      <label for="deskScore">桌面评分：</label>
      <input type="number" v-model="deskScore" id="deskScore" placeholder="请输入桌面评分" />
    </div>
    <div class="input-group">
      <label for="balconyScore">阳台评分：</label>
      <input type="number" v-model="balconyScore" id="balconyScore" placeholder="请输入阳台评分" />
    </div>
    <div class="input-group">
      <label for="bathroomScore">浴室评分：</label>
      <input type="number" v-model="bathroomScore" id="bathroomScore" placeholder="请输入浴室评分" />
    </div>
    <div class="input-group">
      <label for="washstandScore">洗漱台评分：</label>
      <input type="number" v-model="washstandScore" id="washstandScore" placeholder="请输入洗漱台评分" />
    </div>
    <div class="input-group">
      <label for="comprehensiveScore">综合评分：</label>
      <div class="star-rating">
        <span v-for="i in 5" :key="i" @click="setComprehensiveScore(i)" :class="{'filled': comprehensiveScore >= i}">★</span>
      </div>
    </div>
    <button @click="saveRating" class="save-btn">保存评分</button>
    <table class="rating-table">
      <thead>
        <tr>
          <th>宿舍号</th>
          <th>地面评分</th>
          <th>桌面评分</th>
          <th>阳台评分</th>
          <th>浴室评分</th>
          <th>洗漱台评分</th>
          <th>综合评分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(rating, index) in savedRatings" :key="index">
          <td>{{ rating.dormitoryNumber }}</td>
          <td>{{ rating.floorScore }}</td>
          <td>{{ rating.deskScore }}</td>
          <td>{{ rating.balconyScore }}</td>
          <td>{{ rating.bathroomScore }}</td>
          <td>{{ rating.washstandScore }}</td>
          <td>
            <span v-for="i in rating.comprehensiveScore" :key="i">★</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "RatingComponent",
  data() {
    return {
      floorScore: null,
      deskScore: null,
      balconyScore: null,
      bathroomScore: null,
      washstandScore: null,
      dormitoryNumber: "",
      savedRatings: [],
      comprehensiveScore: 0,
    };
  },
  methods: {
    saveRating() {
      if (
        this.floorScore!== null &&
        this.deskScore!== null &&
        this.balconyScore!== null &&
        this.bathroomScore!== null &&
        this.washstandScore!== null &&
        this.dormitoryNumber
      ) {
        this.savedRatings.push({
          dormitoryNumber: this.dormitoryNumber,
          floorScore: this.floorScore,
          deskScore: this.deskScore,
          balconyScore: this.balconyScore,
          bathroomScore: this.bathroomScore,
          washstandScore: this.washstandScore,
          comprehensiveScore: this.comprehensiveScore
        });
        this.floorScore = null;
        this.deskScore = null;
        this.balconyScore = null;
        this.bathroomScore = null;
        this.washstandScore = null;
        this.dormitoryNumber = "";
        this.comprehensiveScore = 0;
      }
    },
    setComprehensiveScore(score) {
      this.comprehensiveScore = score;
    }
  },
};
</script>

<style scoped>
.rating-container {
  padding: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-group label {
  width: 80px;
  font-weight: bold;
}

.input-group input {
  flex: 1;
  padding: 5px;
}

.save-btn {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.rating-table {
  width: 100%;
  border-collapse: collapse;
}

.rating-table thead tr {
  background-color: #f8f9fa;
}

.rating-table th,
.rating-table td {
  border: 1px solid #dee2e6;
  padding: 8px;
}

.star-rating {
  display: flex;
  align-items: center;
}

.star-rating span {
  cursor: pointer;
}

.star-rating span.filled {
  color: gold;
}
</style>
